import type { ProColumns } from '@ant-design/pro-components';
import { ProFormDateRangePicker, ProTable } from '@ant-design/pro-components';
import { Button, Popover, Space, Tag, message } from 'antd';
import { goodItem, selectGoodsType } from '../../utils/types';
import { getGoods } from '../../../api/Goods'
import { EditOutlined, CloseCircleOutlined, CheckCircleOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { getRole } from '../../utils/utils';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const ROLE = getRole()

export default () => {
    

    const columns: ProColumns<goodItem>[] = [
        {
            title: '权益ID',
            dataIndex: 'raiId',
            key: '1'
        },
        {
            title: '商品名称',
            dataIndex: 'productName',
            key: '2',
            render: (_) => <a>{_}</a>,
        },
        {
            title: '库存',
            dataIndex: 'stock',
            hideInSearch: true,
            key: "3"
        },
        {
            title: '状态',
            dataIndex: 'productOnlineState',
            filters: true,
            onFilter: true,
            key: '4',
            valueEnum: {
                1: { text: '未上线', status: '1' },
                2: { text: '已上线', status: '2' },
                3: { text: '审核通过', status: '3' },
                4: { text: '审核驳回', status: '4' },
                5: { text: '未审核', status: '5' },
                6: { text: '草稿', status: '6' },
            },
            render: (_, row) => {
                const productState = {
                    color: '',
                    name: ''
                }
                switch (row.productOnlineState) {
                    case 1: //下线
                        productState.color = '#e3e3e3'
                        productState.name = '已下线'
                        break;
                    case 2: //上线
                        productState.color = '#8ccf17'
                        productState.name = '已上线'
                        break;
                    case 3://审核通过
                        productState.color = '#7e45e8'
                        productState.name = '审核通过'
                        break;
                    case 4://审核驳回
                        productState.color = '#e4495b'
                        productState.name = '审核驳回'
                        break;
                    case 5://审核中
                        productState.color = '#edce02'
                        productState.name = '审核中'
                        break;
                    case 6://草稿箱
                        productState.color = '#2f8ef4'
                        productState.name = '草稿箱'
                        break;
                }
                return (
                    <Space key={row.productId} size={0}>
                        <Tag color={productState.color}>{productState.name}</Tag>
                    </Space>
                );
            }
        },
        {
            title: '上线时间',
            dataIndex: 'timeOn',
            hideInSearch: true,
            key: '5'
        },
        {
            title: '下线时间',
            dataIndex: 'timeOff',
            hideInSearch: true,
            key: '6'
        },
        {
            title: '时间范围',
            valueType: 'dateRange',
            key: '7',
            hideInTable: true,
            renderFormItem: (item, props, form) => {
                return <ProFormDateRangePicker fieldProps={{ maxDate: dayjs() }} />
            }
        },
        {
            title: '描述',
            dataIndex: 'abbreviationDescription',
            hideInSearch: true,
            key: '8'
        },
        {
            title: '代理人',
            dataIndex: 'proxyId',
            hideInSearch: false,
            hideInTable: true,
            key: '9'
        },
        {
            title: '操作',
            width: 180,
            key: '10',
            valueType: 'option',
            render: (_, row) => {
                // console.log(row);
                return [
                    <Popover key={'edit'} content={<p>编辑</p>} trigger="hover">
                        <EditOutlined onClick={() => { editClick(row) }} />
                    </Popover>,
                    ROLE === '0' ? <Popover key={'up'} content={<p>上线</p>} trigger="hover">
                        <ArrowUpOutlined onClick={() => { upLineClick(row) }} />
                    </Popover> : null,
                    <Popover key={'down'} content={<p>下线</p>} trigger="hover">
                        <ArrowDownOutlined onClick={() => { downLineClick(row) }} />
                    </Popover>,
                    ROLE === '1' ? <Popover key={'pass'} content={<p>通过审核</p>} trigger="hover">
                        <CheckCircleOutlined onClick={() => { succseeClick(row) }} />
                    </Popover> : null,
                    ROLE === '1' ? <Popover key={'fail'} content={<p>驳回审核</p>} trigger="hover">
                        <CloseCircleOutlined onClick={() => { failClick(row) }} />
                    </Popover> : null
                ]
            }
        },
    ];

    const editClick = (row: goodItem) => {

    }

    const upLineClick = (row: goodItem) => {
        if (row.productOnlineState === 3) {
            message.info('上线成功')
        } else {
            message.info('该商品状态未处于可以上线的状态，请检查商品状态')
        }
    }

    const downLineClick = (row: goodItem) => {
        if (row.productOnlineState === 2) {
            message.info('下线成功')
        } else {
            message.error('该商品状态未处于可以下线的状态，请检查商品状态')
        }
    }

    const succseeClick = (row: goodItem) => {
        if (row.productOnlineState === 5) {
            message.info('该商品已审核通过')
        } else {
            message.error('该商品状态未处于待审核的状态，请检查商品状态')
        }
    }

    const failClick = (row: goodItem) => {
        if (row.productOnlineState === 5) {
            message.info('该商品的审核已驳回')
        } else {
            message.error('该商品状态未处于待审核的状态，请检查商品状态')
        }
    }


    const navigate = useNavigate()
    return (
        <ProTable<goodItem>
            columns={columns}
            request={(params: selectGoodsType, sorter, filter) => {
                const param = {
                    pageSize: params.pageSize,
                    productName: params.productName,
                    productOnlineState: params.productOnlineState,
                    raiId: params.raiId,
                    timeOn: '',
                    timeOff: '',
                    proxyId: params.proxyId
                }
                if (params[3] != undefined) {
                    param.timeOn = params[3][0]
                    param.timeOff = params[3][1]
                }
                return getGoods(param)
            }}
            rowKey="productId"
            pagination={{
                showQuickJumper: true,
            }}
            search={{
                defaultCollapsed: false,
            }}
            dateFormatter="string"
            toolbar={{
                title: '商品列表',
            }}
            toolBarRender={() => [
                ROLE === '0' ? <Button type="primary" key="primary" onClick={() => { navigate('/WorkSpace/AddGoods') }}>
                    新建商品
                </Button> : null
            ]}
        />
    );
};